<template>
  <span>
    <c-model v-model="show" width="726px" title="网费充值" class="recharge-model">
      <span slot="footer"></span>
      <div class="network-display">
        <div class="network-money">
          <div>网费余额∶</div>
          <div class="balance">
            <span class="color-brown fz-20 money">{{ memberInfo.balance }}</span>元
            <span class="color-gray ml-5">(现金:{{ memberInfo.availMoney }}元 赠送金:{{
                memberInfo.presentedMoney
              }})</span>
          </div>
        </div>
        <div class="card-list">
          <div class="item" :class="{'active': currIndex == -1}" v-if="coupon.id"
               @click="handlePayMoneyBnt(coupon, -1)">
            <div class="text-center">
              <div class="money number">
                <span>{{ coupon.conditionMoney }}</span>
                元
              </div>
              <div class="font-size-24 desc">送{{ coupon.presenterMoney }}元赠送金</div>
            </div>
          </div>
          <div class="item" :class="{'active': currIndex == index}"
               v-for="(item, index) in list"
               :key="index"
               @click="handlePayMoneyBnt(item, index)">
            <div class="money number">
              <span>{{ item.conditionMoney }}</span>元
            </div>
            <div class="font-size-24 desc">送{{ item.presenterMoney }}元赠送金</div>
          </div>
          <div class="item other" :class="{'active': currIndex == -2}" @click="handlePayMoneyBnt('', -2)">
            <input placeholder="其他金额"
                   v-model="payNumber"
                   type="number"
                   @blur="otherMoneyChange"></input>
          </div>
        </div>
        <div class="select-coupon flex col-center row-between" @click="showSelectCoupon">
          <div>优惠券</div>
          <div class="color-orange flex col-center">
            <template v-if="coupon.id">{{ coupon.couponName }}</template>
            <template v-else>{{ couponList.length }}个可用</template>
            <i class="iconfont icon-arrow color-muted"/>
          </div>
        </div>
        <div class="pay-bnts flex col-center">
          <div class="wechat-add mr-12" @click="handleNetworkPayData(5)">
            <img src="@/assets/images/wallet/icon-alipay.png" alt="">微信
          </div>
          <div class="zfb-add" @click="handleNetworkPayData(6)">
            <img src="@/assets/images/wallet/icon-alipay.png" alt="">支付宝
          </div>
        </div>
      </div>
    </c-model>
    <!--支付-->
    <scanPay v-model="scanPayModel.is"
             :title="scanPayModel.title"
             :payType="scanPayModel.payType"
             :money="scanPayModel.topUpMoney"
             :orderNumber="scanPayModel.orderNumber"
             :qrcode="scanPayModel.imgUrl"
             @success="paySuccess"
             @fail="loading = false"
    />
    <couponSelect v-model="couponModelShow"
                  :list="couponList"
                  :selectId="(coupon ? coupon.couponId : null)"
                  @select="selectCoupon"/>
  </span>
</template>
<script>
import {mapGetters} from "vuex";
import {memberBalance} from "@/api/member";
import {decryptByDESModeCBC, encryptByDESModeCBCUtf8to64} from "@/common/utils/des";
import {activityData, clientPay, clientRecharge, getCouponList} from "@/api/wallet";
import {numberInt} from "@/common/utils";
import scanPay from "@/components/scanPay/index.vue";
import couponSelect from "@/components/couponSelect/index.vue";

export default {
  name: "index",
  props: {
    value: true,
    memberInfo: {
      type: Object, default: () => {
      }
    }
  },
  components: {
    couponSelect,
    scanPay
  },
  data() {
    return {
      info: {
        balance: 0,
        availMoney: 0,
        presentedMoney: 0
      },
      couponList: [],
      list: [],
      currIndex: 0,
      payNumber: null,
      coupon: {},
      couponModelShow: false,
      scanPayModel: {
        title: '',
        is: false,
        orderNumber: '',
        imgUrl: ''
      },
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['memberId']),
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  methods: {
    init() {
      this.loading = false
      this.listCoupon()
      this.getActivityList()
    },
    getActivityList() {
      let params = {
        lgUserId: this.memberInfo.memberId
      }
      activityData({data: encryptByDESModeCBCUtf8to64(JSON.stringify(params))}).then(res => {
        if (res.code == 200) {
          this.list = res.data.refillCards
        }
      })
    },
    showSelectCoupon() {
      this.listCoupon()
      this.couponModelShow = true
    },
    listCoupon() {
      const params = {
        memberId: this.memberInfo.memberId,
        pageNum: 1,
        pageSize: 9999,
        couponType: 1,
        status: 1
      }
      getCouponList(params).then(res => {
        this.couponList = (res.rows || []).map(item => {
          item.couponName = item.name;
          item.title = item.conditionMoney
          return item
        })
      })
    },
    selectCoupon(item) {
      console.log(item)
      this.coupon = item || {}
      this.couponModelShow = false
      this.currIndex = -1
    },
    otherMoneyChange(val) {
      if (!this.payNumber) return;
      if (!/^[1-9]\d*$/.test(this.payNumber)) {
        this.$Message.error('充值金额必须是大于0的正整数')
        this.payNumber = null
        return
      }
      if (this.payNumber < 10) {
        this.$Message.error('充值金额不能小于10元')
        this.payNumber = null
      }
    },
    handlePayNumber() {
      this.currIndex = -2
    },
    handlePayMoneyBnt(item, index) {
      this.currIndex = index;
      this.payNumber = null;
    },
    // 充值网费创建订单
    handleNetworkPayData(payType) {
      let topUpMoney = 0, presenterMoney = 0, refillCardId = '', refillCardType = ''
      if (this.currIndex == -1) {
        topUpMoney = this.coupon.conditionMoney
        presenterMoney = this.coupon.presenterMoney
        refillCardId = this.coupon.couponId
        refillCardType = 2
      } else if (this.currIndex == -2) {
        if (!this.payNumber || this.payNumber <= 0) {
          this.$Message.error('充值金额必须大于0')
          return
        }
        if (this.payNumber.toString().indexOf(".") >= 0) {
          this.$Message.error('充值金额必须为整数')
          return
        }
        if (this.payNumber > 5000) {
          this.$Message.error('充值金额不能大于5000元')
          return
        }
        topUpMoney = Number(this.payNumber)
        presenterMoney = 0
      } else {
        topUpMoney = this.list[this.currIndex].conditionMoney
        presenterMoney = this.list[this.currIndex].presenterMoney
        refillCardId = this.list[this.currIndex].cardId || ''
        refillCardType = this.list[this.currIndex].type || ''
      }
      if (topUpMoney < 10) {
        this.$Message.error('充值金额必须大于10元')
        return
      }
      const params = {
        memberId: this.memberInfo.memberId,
        topUpMoney: topUpMoney,
        presenterMoney: presenterMoney,
        type: payType,
        source: 2,
      }
      if (refillCardId && refillCardType) {
        params.refillCardId = refillCardId
        params.refillCardType = refillCardType
      }

      console.log(params)
      if (this.loading) return;
      this.loading = true
      clientRecharge({data: encryptByDESModeCBCUtf8to64(JSON.stringify(params))}).then(res => {
        if (res.code == 200) {
          this.handleClientPay({
            orderNumber: res.data.orderNumber,
            payType: payType,
            orderType: 1
          }, params)
        } else {
          this.$Message.error(res.msg);
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 网费充值-支付接口
    handleClientPay(params, payInfo) {
      clientPay({data: encryptByDESModeCBCUtf8to64(JSON.stringify(params))}).then(res => {
        if (res.code == 200) {
          this.scanPayModel = {
            is: true,
            title: params.payType == 5 ? '微信支付' : '支付宝支付',
            payType: params.payType,
            imgUrl: res.data.imgUrl,
            orderNumber: params.orderNumber,
            ...payInfo
          }
        } else {
          this.$Message.error(res.msg || '操作失败!');
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    paySuccess() {
      this.show = this.loading = false
      this.payNumber = null;
      this.currIndex = 0
      this.coupon = {}
      this.$Message.success('充值成功')
      this.$emit('success')
    }
  },
  watch: {
    show() {
      if (this.show) {
        this.init()
      }
    }
  },
  created() {
  }
}
</script>

<style lang="scss">
@import "index";
</style>
